<template>
    <Form :class size="large" autocomplete="on" ref="formRef" :model="formState" :rules="rules" @finish="handleFinish()">
        <h3 class="text-[32px] !leading-10 font-bold text-center text-primary mb-12">欢迎使用智聘！</h3>
        <FormItem name="mobile">
            <a-input v-model:value="formState.mobile" placeholder="请输入手机号" prefix="+86" class="!text-sm text-primary !h-12" />
        </FormItem>
        <FormItem name="code" :rules="{ required: true, message: '请输入验证码' }" v-if="loginMode === LoginMode.Code">
            <a-input v-model:value="formState.code" placeholder="请输入验证码" class="!text-sm text-primary !h-12">
                <template #suffix>
                    <span class="touchable-opacity text-theme" :class="running ? 'cursor-not-allowed' : ''" @click="triggerSend">
                        {{ running ? remain + 's' : '获取验证码' }}
                    </span>
                </template>
            </a-input>
        </FormItem>
        <template v-else>
            <FormItem name="password" :rules="{ required: true, message: '请输入密码' }" class="!mb-4">
                <a-input-password v-model:value="formState.password" placeholder="请输入密码" class="!text-sm text-primary !h-12">
                    <template #prefix>
                        <GpFontIcon name="icon-mima" class="!text-2xl" />
                    </template>
                </a-input-password>
            </FormItem>
            <a-form-item class="!mb-0 form-item-control-password">
                <a-form-item name="remember" no-style >
                    <a-checkbox v-model:checked="formState.remember">
                        <span class="text-third">记住密码</span>
                    </a-checkbox>
                </a-form-item>
                <span class="float-right text-third cursor-pointer hover:text-theme" @click="handleForgot()">忘记密码?</span>
            </a-form-item>
        </template>
        <FormItem class="!mt-[56px]">
            <a-button type="primary" html-type="submit" block shape="round" :loading="formLoading" class="!h-12">登录</a-button>
        </FormItem>
        <FormItem name="allowed" class="form-item-control-license">
            <a-checkbox v-model:checked="formState.allowed">
                <span class="text-[#1F2329] text-sm">我已阅读并同意</span>
            </a-checkbox>
            <span class="text-theme text-sm">
                <a :href="userLicense" target="_blank">《用户协议》</a>
                <a :href="privatePolicy" target="_blank">《隐私政策》</a>
            </span>
        </FormItem>
        <p class="text-center text-[#ACAEB2] text-xs" v-if="loginMode === LoginMode.Code">新用户登录默认注册账号</p>
        <div class="flex flex-row items-center justify-center gap-8 mt-[42px] mb-8">
            <div class="left-area"></div>
            <div class="anycls hover:!text-theme" @click="switchLoginMode">{{ loginMode === LoginMode.Code ? "密码登录" : "验证码登录" }}</div>
            <div class="right-area"></div>
        </div>
    </Form>
    <GpForgotPass ref="forgotRef"/>
</template>
<script lang="ts" setup>
import { postLogin, postSendlogincode } from '@/api/siderBar/home'
import type { CompanyLoginResult } from '@/api/siderBar/model';
import { Form, FormItem } from 'ant-design-vue'
import type { Exposed as ForgotExposed } from '@/components/GpForgotPass/type'
defineOptions({
    name: 'GpLoginForm',
    inheritAttrs: false
})
defineProps<{
    class: string
}>()
const userLicense = __USER_LICENSE__
const privatePolicy = __PRIVATE_POLICY__
const emit = defineEmits<{
    success: [data: CompanyLoginResult]
}>()
enum LoginMode {
    Code,
    Pass
}
type CommonState = {
    mobile: string
    allowed?: boolean
}
type CodeState = {
    code?: string
}
type PassState = {
    password?: string
    remember?: boolean
}
type FormState = CommonState & CodeState & PassState;
const forgotRef = ref<ForgotExposed>()
const loginMode = ref<LoginMode>(LoginMode.Code)
const {
    formLoading,
    formRef,
    formState,
    handleFormFinish,
    rules
} = useFormState<FormState>({
    getInitialState() {
        return {
            mobile: "",
            code: ""
        }
    },
    rules: {
        mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        allowed: {
            validator(_, value, callback) {
                if (!value) {
                    callback("请勾选同意相关协议")
                    return
                }
                callback()
            },
        }
    }
})
const { triggerSend, remain, running, reset } = useVerifyCode(60, () => formState.value.mobile, mobile => postSendlogincode({ mobile }))
function handleFinish() {
    handleFormFinish(async ({ code, mobile, password }) => {
        const ret = await postLogin(loginMode.value === LoginMode.Code ? { account: mobile, code } : { account: mobile, pwd: password })
        emit("success", ret)
    }).finally(reset)
}
function switchLoginMode() {
    loginMode.value = loginMode.value === LoginMode.Code ? LoginMode.Pass : LoginMode.Code 
}
function handleForgot() {
    if (forgotRef.value) {
        forgotRef.value.open()
    }
}
</script>
<style lang="less" scoped>
.form-item-control-license {
    :deep(.ant-form-item-control-input-content) {
        text-align: center;
    }
}
.form-item-control-password {
    :deep(.ant-form-item-control-input) {
        min-height: max-content;
    }
}
.anycls {
    color: #324366;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
    flex: none;
}
.left-area {
    width: 120px;
    height: 1px;
    flex-shrink: 0;
    opacity: 0.5;
    background: linear-gradient(90deg, #32436600 0%, #324366 100%);
}
.right-area {
    width: 120px;
    height: 1px;
    flex-shrink: 0;
    opacity: 0.5;
    background: linear-gradient(90deg, #324366 0%, #32436600 100%);
}
</style>